<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/static/vue/vue.js"></script>
    <script src="/static/axios/axios.js"></script>
    <%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/element/index.css">
    <!-- 引入组件库 -->
    <script src="/static/element/index.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的购物车</title>
</head>
<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/goShoppingCart">购物车</a></el-menu-item>
        <el-menu-item index="3"><a href="/goUser">${user.userName} 个人中心 </a></el-menu-item>
        <c:if test="${user.id!=null}">
            <el-menu-item index="3"><a href="/logout">注销 ${user.userName}</a></el-menu-item>
        </c:if>
    </el-menu>

    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>您的购物车:</span>
            <span>总价格: {{goodsOrderVO.order.totalMoney}} ￥</span>
            <el-button style="float: right; padding: 3px 0" type="primary" @click="buyCart">结算</el-button>
        </div>
        <div align="center" v-for="item in goodsOrderVO.orderItems">
            <el-card class="text item" style="width: 800px">
                <el-button slot="header" @click="removeFromCart(item.goodsId)" style="float: right; padding: 3px 0"
                           type="danger">删除
                </el-button>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div><img style="width: 100px;height: 100px" :src="item.goodsImage" alt=""></div>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <div align="center">
                                <div>购买的商品名称：{{item.goodsName}}</div>
                                <div>购买的商品价格：{{item.goodsPrice}}</div>
                                <div>购买的数量：{{item.buyCount}}</div>
                                <div>购买的总价格：{{item.totalPrice}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            &nbsp;
                        </div>
                    </el-col>
                </el-row>

            </el-card>
        </div>
    </el-card>
</div>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "33",
            name: "like",
            goodsOrderVO: "",
        },
        created() {
            let id = '${user.id}'
            console.log(id);
            if (id == '' || id == null || id == undefined) {
                window.location.href = "/goLogin"
            }
            this.getCart()
        },
        methods: {
            removeFromCart(goodsId) {
                axios.request({
                    url: "/goods/removeFromCart/${user.id}/" + goodsId,
                    method: "post",
                }).then(res => {
                    this.goodsOrderVO = res.data.data;
                })
            },
            buyCart() {
                axios.request({
                    url: "/goods/buyCart",
                    method: "post",
                }).then(res => {
                    this.goodsOrderVO = res.data.data;
                    window.location.href = "/goSuccess"
                })
            },
            getCart() {
                axios.request({
                    url: "/goods/getCart/${user.id}",
                    method: "get",
                }).then(res => {
                    this.goodsOrderVO = res.data.data;
                });
            }
        }
    })
</script>
</body>
</html>